<template>
  <view class="main">
    <template v-if="list.length > 0">
      <view class="box" v-for="(item, index) in list" :key="index">
        <view class="left">
          <image :src="item.avatar" class="headImage" mode="scaleToFill" />
          <view class="nameBox">
            <view class="name">
              <text>{{ item.name || "未知" }}</text>
              <image v-if="item.level === '1'" src="../static/home/hg.png" mode="scaleToFill" />
              <view v-if="item.authFlag === '1'" class="authLabel"><image src="../../static/home/yrz.png" mode="scaleToFill" />已认证</view>
            </view>
            <view class="zw">很想成为你的好友</view>
          </view>
        </view>
        <view class="rightBox">
          <view class="btn" @click="applyFn(item)">通过</view>
          <u-icon name="close" @click="refuseFn(item)"></u-icon>
        </view>
      </view>
    </template>
    <view v-else style="width: 100%; display: flex; justify-content: center">
      <u-empty mode="list"></u-empty>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { agreeFriend, getApplyList, refuseFriend } from "@/api/order";
import { onMounted, ref } from "vue";
const list = ref<HomeTypes.friendsDatum[]>([]);
onMounted(() => {
  rest();
});
const rest = async () => {
  const res = await getApplyList();
  list.value = res.data;
};
const applyFn = (data: any) => {
  uni.showModal({
    title: "提示",
    content: "您要添加该好友吗？",
    success: async function (res) {
      if (res.confirm) {
        await agreeFriend({ id: data.id });
        uni.showToast({
          title: "添加成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              rest();
            }, 400);
          },
        });
      }
    },
  });
};
const refuseFn = (data: any) => {
  uni.showModal({
    title: "提示",
    content: "您要拒绝添加该好友吗？",
    success: async function (res) {
      if (res.confirm) {
        await refuseFriend({ id: data.id });
        uni.showToast({
          title: "拒绝成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              rest();
            }, 400);
          },
        });
      }
    },
  });
};
refuseFn;
</script>

<style scoped lang="less">
.main {
  background: #fff;
  margin-top: 20rpx;
}
.box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
  padding-bottom: 32rpx;
  border-bottom: 1px solid #f5f7f9;
  .left {
    display: flex;
    .headImage {
      width: 88rpx;
      height: 88rpx;
      background: salmon;
      margin-right: 24rpx;
      border-radius: 50%;
    }
    .nameBox {
      .name {
        display: flex;
        align-items: center;
        text {
          font-size: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #1e1e1e;
          line-height: 44rpx;
        }
        image {
          width: 28rpx;
          height: 28rpx;
          margin-left: 10rpx;
        }
      }
      .zw {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #bebebe;
        line-height: 46rpx;
        margin-top: 8rpx;
      }
    }
  }
  .rightBox {
    display: flex;
    align-items: center;
    .btn {
      background: #1676fd;
      border-radius: 28rpx;
      padding: 10rpx 38rpx;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      margin-right: 22rpx;
    }
  }
}
</style>
